<template>
    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_text" />
        </div>
    </div>

    <!-- 表单结构 -->
    <van-form @submit="profile">
        <!-- 昵称 -->
        <van-field
            v-model="business.nickname"
            name="nickname"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{required: true, message: '请输入昵称'}]"
        />

        <!-- 手机号码 -->
        <van-field
            v-model="business.mobile"
            name="mobile"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
                {required: true, message: '请输入手机号码'},
                {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
            ]"
        />

        <!-- 邮箱 -->
        <van-field
            v-model="business.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[
            {required: true, message: '请输入邮箱'},
            {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}
            ]"
        />

        <!-- 密码 -->
        <van-field
            v-model="business.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
        />

        <!-- 性别 -->
        <van-field name="gender" label="性别">
            <template #input>
                <van-radio-group v-model="business.gender" direction="horizontal">
                    <van-radio name="0">保密</van-radio>
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 地区 -->
        <van-field 
            name="region"
            label="地区选择"
            placeholder="点击选择省市区"
            v-model="business.region_text"
            readonly
            is-link
            @click="AreaShow = true"
        />

        <!-- 弹出框组件 -->
        <van-popup v-model:show="AreaShow" position="bottom">
            <!-- 地区组件 -->
            <van-area
                v-model="code"
                title="标题" 
                :area-list="areaList"
                @cancel = "AreaShow = false"
                @confirm = "AreaConfirm"
            />
        </van-popup>

        <!-- 头像上传 -->
        <van-field name="avatar" label="上传头像">
            <!-- 插槽重新输入框部分，用文件上传来代替 -->
            <template #input>
                <van-uploader v-model="avatar" :max-count="1" />
            </template>
        </van-field>

        <div style="width:50%;margin:2em auto;">
            <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
        </div>


    </van-form>
</template>

<script setup>
    //引入地区数据
    import { areaList } from '@vant/area-data'

    const {proxy} = getCurrentInstance()
    //获取个人资料信息
    let business = proxy.$business
       

    let loading = ref(false)

    //头像数据
    let avatar = ref([{
        url: business.value.avatar_text
    }])

    //地区显示的变量
    let AreaShow = ref(false)
    let code = ref(business.value.district || business.value.city || business.value.province)

    //改变地区
    const AreaConfirm = async ({selectedOptions}) => 
    {
        //弹出框隐藏
        AreaShow.value = false

        //更换中文字
        business.value.region_text = selectedOptions.map((item) => item.text).join('-')

        //地区码更换
        code.value = selectedOptions.map((item) => item.value).pop()
    }

    //修改个人资料
    const profile = async (values) =>
    {
        //修改loading状态
        loading.value = true

        //组装数据
        var params = {
            id: business.value.id,
            nickname: values.nickname,
            mobile: values.mobile,
            gender: values.gender,
            email: values.email,
        }

        //密码不为空在增加
        if(values.password)
        {
            params.password = values.password
        }


        //地区码
        if(code.value)
        {
            params.code = code.value
        }

        //判断是否有图片上传
        if(values.avatar[0].file)
        {
            params.avatar = values.avatar[0].file
        }

        //停止loading状态
        loading.value = false

        var result = params.avatar ? await proxy.$UPLOAD({url:'/business/profile', params}) : await proxy.$POST({url:'/business/profile', params})

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        //成功就回退上一个界面
        proxy.$success({
            message: result.msg,
            duration: 1000,
            onClose: () => proxy.$router.go(-1)
        })
    }
</script>

<style scoped>
    @import url('/assets/css/BusinessProfile.css');
</style>